<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div {
            width: 300px;
            height: 300px;
            background: pink;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <input type="button" value="放大" />
    <input type="button" value="缩小" />
    <input type="button" value="变蓝" />
    <input type="button" value="变黄" />
    <input type="button" value="华文仿宋" />
    <input type="button" value="变宽" />
    <div id="div1">
        fengchengxd ahanhan hnachengz hihw=eihan hantoo
    </div>
</body>
<script type="text/javascript">
    var inp = document.getElementsByTagName('input');
    var div1 = document.getElementById('div1');
    div1.style.fontSize = '20px';

    function tostyle(name, value) {
        div1.style[name] = value;
    }
    inp[0].onclick = function() {
        var v = parseInt(div1.style.fontSize) + 2;
        if (v < 40)
            div1.style.fontSize = v + 'px';
    }
    inp[1].onclick = function() {
        var v = parseInt(div1.style.fontSize) - 2;
        if (v > 5)
            div1.style.fontSize = v + 'px';
    }
    inp[2].onclick = function() {
        div1.style.background = 'blue';
    }
    inp[3].onclick = function() {
        div1.style.background = 'yellow';
    }
    inp[4].onclick = function() {
        tostyle('fontFamily', '华文仿宋');
    }
    inp[5].onclick = function() {
        tostyle('width', '500px');
    }
</script>

</html>